<template>
  <div class="login">
      <div class="header">
        <div class="all">
          <ul>
            <li class="u1">办公自动化系统</li>
            <li class="u2">OFFICE AUTOMATION SYSTEM</li>
          </ul>
          <img class="people" src="../../assets/buttonbg.png" alt="">


          
          <div class="login_right">
        <el-config-provider size="large">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            label-width="80px"
            class="login_form"
            :rules="rules"
          >
           
            <!-- 表单选项 -->
            <el-form-item ref="form" label="" prop="username">
              <el-input v-model="ruleForm.username" placeholder="请输入用户名" clearable>
                <template #prefix>
                  <div class="inpTit">
                   <img src="../../assets/inputPerson.png" alt="">
                  </div>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input
                v-model="ruleForm.password"
                type="password"
                placeholder="请输入密码"
                show-password
              >
                <template #prefix>
                  <div class="inpTit">
                    <img src="../../assets/inputPassword.png" alt="">
                  </div>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="">
              <el-checkbox v-model="checked" label="记住密码" size="large" />
              <el-link type="primary">
                忘记密码?
              </el-link>
            </el-form-item>
            <el-form-item label="">
              <el-button
                type="primary"
                class="sub"
                :loading="loading"
                @click="sub(ruleFormRef)"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </el-config-provider>
      </div>
       
        </div>
          
      </div>
  </div>
</template>
 <script lang="ts" setup>

 // 工具类
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ref, reactive } from 'vue'
import tools from '../../utils/tools'
import router from '../../router/index'
// 加解密
import CryptoJs from '../../utils/crypto'
// // 请求
import login from '../../api/login'
// 字符串分割
const cryStr = '______'

import { ElNotification } from 'element-plus'
// token 过期时间(分钟)
const tokenTime = ref(60)

const loading = ref(false)
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  username: '',
  password: '',
})
const checked = ref(false)

const rules = reactive<FormRules>({
  username: [
    {
      required: true,
      message: '用户名为必填项!!!',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '密码为必填项!!!',
      trigger: 'blur',
    },
  ],
})
// 登录保存查询
const info = localStorage.getItem('info')
if (info) {
  const userInfo = CryptoJs.decrypt(info)
  if (userInfo) {
    const [username, password] = userInfo.split(cryStr)
    checked.value = true
    ruleForm.username = username
    ruleForm.password = password
  }
}
// 登录提交按钮
const sub = async (formEl: FormInstance | undefined) => {
  loading.value = true
  if (!formEl) return

  await formEl.validate((valid, fields) => {
    if (valid) {
      // login(ruleForm).then(res => {
      //   if (res.status === 200) {
      //     // ok
      //     if (checked.value) {
      //       // 保存登录状态
      //       localStorage.setItem('info', CryptoJs.encrypt(`${ruleForm.username}${cryStr}${ruleForm.password}`))
      //     } else {
      //       // 取消登录状态
      //       localStorage.removeItem('info')
      //     }
      //     tools.setCookie('token', res.token, tokenTime.value * 60, '/')
      //     console.log(123)
      //     router.push('./home')
      //   } else {
      //     ElMessage.error('密码或用户名错误')
      //   }
      // })
      // ok
      if (checked.value) {
            // 保存登录状态
            localStorage.setItem('info', CryptoJs.encrypt(`${ruleForm.username}${cryStr}${ruleForm.password}`))
          } else {
            // 取消登录状态
            localStorage.removeItem('info')
          }
          tools.setCookie('token', 'token', tokenTime.value * 60, '/')
          console.log(123)
          router.push('./home')
      console.log('error submit!', fields)
    }
  })
  loading.value = false
}


</script>

<style scoped>
:deep html,body{
margin: 0;
padding: 0;
}


.header{
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;


}
.header .el-input{
  width: 300px;
  height: 35px;
  margin-top: 10px;
  border: 0;

}

.login{
  background: url(../../assets/loginbg.png)no-repeat ;
}
.all{
  width: 1242px;
  height: 450px;
  background: #f7f8fa url() no-repeat 580px 136px;
  background-size: 700px;
  border-radius: 16px;
  margin: auto;
  padding-top: 50px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

}

.all .el-button{
  margin-left: 70px;
  margin-top: 10px;
  width: 150px;
  height: 40px;
  border: 0;
  border-radius:10px ;
  background: #224CDA;
  color: #FFFFFF;
 
}

.all .el-input img{
 margin-top: 10px;
}

:deep .el-link.el-link--primary{
  width: 90px;
  padding: 0!important;

}
:deep .el-link__inner{
  display: block;
  font-size: 14px;
  border: 0;


}
.all .text{
  margin-top: 50px;
  margin-left: 50px;
  position: relative;
}

.all .password{
  margin-left: 50px;
  position: relative;
}

ul{
  width: 1000px;
  list-style: none;
  
}

ul .u1{
  font-size: 44px;
  color: #646566;
}

ul .u2{
  font-size: 24px;
  color: #969799;
}

.people{
  position: absolute;
  right: -60px ;
  bottom: -60px;
}

.person{
  margin-left: -330px;
  margin-top: 13px;
  position: absolute;
}

.pass{
  margin-left: -330px;
  margin-top: 13px;
  position: absolute;
}


</style>


